<script setup lang="ts">
import { onMounted, onUnmounted, useTemplateRef } from 'vue';
import * as echarts from 'echarts';

const leftRef = useTemplateRef<HTMLElement>('left');

const data1 = [18203, 23489, 29034, 104970, 131744, 630230];
const data2 = [120, 200, 150, 80, 70, 110];
onMounted(() => {
    const chart = echarts.init(leftRef.value!);
    chart.setOption({
        title: {
            text: '世界人口',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        legend: {},
        xAxis: {
            type: 'value',
            name: '人口（亿）',
        },
        yAxis: {
            type: 'category',
            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: data2,
            },
            {
                realtimeSort: true,
                name: '2012',
                type: 'bar',
                data: data2,
            },
        ],
    });

    const run = () => {
        for (let i = 0; i < 6; ++i) {
            data1[i] += Math.round(Math.random() * 10000);
            data2[i] += Math.round(Math.random() * 20000);
        }
        chart.setOption({
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: data1,
                },
                {
                    name: '2012',
                    type: 'bar',
                    data: data2,
                },
            ],
        });
    };
    run();

    const timer = setInterval(run, 1000);
    onUnmounted(() => {
        clearInterval(timer);
    });
});
</script>

<template>
    <div class="left" ref="left" />
</template>

<style scoped lang="scss"></style>
